// 工作信息
import FormAuth from '@/components/FormAuth';
import Select from '@/components/NewSelect';
import { findByCodeList } from '@/services/login';
import { getOptions } from '@/utils';
import { dataFrommat, pattern } from '@/utils/common';
import { useRequest } from 'ahooks';
import { Col, DatePicker, Form, Input, InputNumber, Row, type FormInstance } from 'antd';
import { type Gutter } from 'antd/es/grid/row';
import { useMemo } from 'react';
import { useIntl, useModel } from 'umi';
const StepTwo: React.FC<{
  form: FormInstance<any>;
  isCenter?: boolean;
  span?: number;
  required?: boolean;
  gutter?: Gutter | [Gutter, Gutter];
  steps?: number;
  topTitle?: string;
}> = ({ form, gutter = [20, 0], steps, required = true, span, isCenter, topTitle }) => {
  const intl = useIntl();
  const { step } = useModel('stepModel');
  const cSteps = steps || step;
  const occupationVal = Form.useWatch('occupation', form);

  const { data } = useRequest(() => {
    return findByCodeList({
      code: 'occupation,employerSize,salaryType,area,scope,industry_occupation,educationStatus,companyType,employerIndustry',
    });
  });
  const {
    occupation = [],
    employerSize,
    educationStatus = [],
    companyType,
    employerIndustry,
  } = data?.data || {};
  const occupationType = form.getFieldValue('occupation') || '';

  const name = occupation.find((item) => item.value == occupationType)?.name;

  const renderItem = useMemo(() => {
    const type = occupationVal || form.getFieldValue('occupation');

    switch (Number(type)) {
      case 1:
        return {
          content: (
            <>
              <FormAuth
                span={span || 12}
                label={intl.formatMessage({ id: 'home.employ_name' })}
                name="employerName"
                rules={[{ required }, pattern]}
              >
                <Input
                  maxLength={30}
                  placeholder={intl.formatMessage({ id: 'home.employ_name' })}
                />
              </FormAuth>

              <FormAuth
                label={intl.formatMessage({ id: 'home.employ_work' })}
                name="employerIndustry"
                span={span || 12}
                rules={[{ required }, pattern]}
              >
                <Select
                  options={getOptions(employerIndustry)}
                  placeholder={intl.formatMessage({ id: 'home.employ_work' })}
                />
              </FormAuth>
              <FormAuth
                label={intl.formatMessage({ id: 'home.employ_people_num' })}
                name="employerSize"
                span={span || 12}
                rules={[{ required }]}
              >
                <Select
                  options={getOptions(employerSize)}
                  placeholder={intl.formatMessage({ id: 'home.employ_people_num' })}
                />
              </FormAuth>
              <FormAuth
                label={intl.formatMessage({ id: 'home.employ_address' })}
                name="companyAddressArea"
                span={span || 12}
                rules={[{ required }, pattern]}
              >
                <Input
                  maxLength={50}
                  placeholder={intl.formatMessage({ id: 'home.employ_address' })}
                />
              </FormAuth>
              <FormAuth
                label={intl.formatMessage({ id: 'home.self_job' })}
                name="position"
                span={span || 12}
                rules={[{ required }, pattern]}
              >
                <Input maxLength={30} placeholder={intl.formatMessage({ id: 'home.self_job' })} />
              </FormAuth>

              <FormAuth
                rules={[{ required }]}
                label={intl.formatMessage({ id: 'home.month_money' })}
                name="salary"
                span={span || 12}
              >
                <InputNumber
                  controls={false}
                  style={{ width: '100%' }}
                  prefix="$"
                  maxLength={10}
                  placeholder={`${intl.formatMessage({ id: 'home.month_money' })}`}
                />
              </FormAuth>
            </>
          ),
        };
      case 2:
        return {
          content: (
            <>
              <FormAuth
                span={span || 12}
                label={intl.formatMessage({ id: 'home.employ_name' })}
                name="employerName"
                rules={[{ required }, pattern]}
              >
                <Input placeholder={intl.formatMessage({ id: 'home.employ_name' })} />
              </FormAuth>

              <FormAuth
                label={intl.formatMessage({ id: 'home.employ_address' })}
                name="companyAddressArea"
                span={span || 12}
                rules={[{ required }, pattern]}
              >
                <Input placeholder={intl.formatMessage({ id: 'home.employ_address' })} />
              </FormAuth>
              <FormAuth
                label={intl.formatMessage({ id: 'home.self_job' })}
                name="position"
                span={span || 12}
                rules={[{ required }, pattern]}
              >
                <Input placeholder={intl.formatMessage({ id: 'home.self_job' })} />
              </FormAuth>

              <FormAuth
                rules={[{ required }]}
                label={intl.formatMessage({ id: 'home.month_money' })}
                name="salary"
                span={span || 12}
              >
                <InputNumber
                  controls={false}
                  style={{ width: '100%' }}
                  prefix="$"
                  maxLength={10}
                  placeholder={`${intl.formatMessage({ id: 'home.month_money' })}`}
                />
              </FormAuth>
            </>
          ),
        };
      case 3:
        return {
          content: (
            <>
              <FormAuth
                rules={[{ required }]}
                label={intl.formatMessage({ id: 'home.month_income' })}
                name="salary"
                span={span || 12}
              >
                <InputNumber
                  controls={false}
                  style={{ width: '100%' }}
                  prefix="$"
                  maxLength={10}
                  placeholder={`${intl.formatMessage({ id: 'home.month_income' })}`}
                />
              </FormAuth>
            </>
          ),
        };
      case 4:
        return {
          content: (
            <>
              <FormAuth
                rules={[{ required }]}
                label={intl.formatMessage({ id: 'home.month_income' })}
                name="salary"
                span={span || 12}
              >
                <InputNumber
                  controls={false}
                  style={{ width: '100%' }}
                  prefix="$"
                  maxLength={10}
                  placeholder={`${intl.formatMessage({ id: 'home.month_income' })}`}
                />
              </FormAuth>
              <FormAuth
                label={intl.formatMessage({ id: 'home.company_type' })}
                name="companyType"
                span={span || 12}
                rules={[{ required }, pattern]}
              >
                <Select
                  options={getOptions(companyType)}
                  placeholder={intl.formatMessage({ id: 'home.company_type' })}
                />
              </FormAuth>
            </>
          ),
        };
      case 5:
        return {
          content: (
            <>
              <FormAuth
                label={intl.formatMessage({ id: 'home.academic_qualification' })}
                name="education"
                span={span || 24}
                rules={[{ required }]}
              >
                <Select
                  options={getOptions(educationStatus)}
                  placeholder={intl.formatMessage({ id: 'home.academic_qualification' })}
                />
              </FormAuth>

              <FormAuth
                span={span || 24}
                label={intl.formatMessage({ id: 'home.school_name' })}
                name="school"
                rules={[{ required }, pattern]}
              >
                <Input
                  maxLength={30}
                  placeholder={intl.formatMessage({ id: 'home.school_name' })}
                />
              </FormAuth>

              <FormAuth
                rules={[{ required }]}
                label={intl.formatMessage({ id: 'home.school_time' })}
                name="graduationTime"
                span={span || 24}
              >
                <DatePicker
                  format={dataFrommat}
                  placeholder={intl.formatMessage({ id: 'home.school_time' })}
                />
              </FormAuth>
            </>
          ),
        };
      case 6:
        return {
          content: (
            <>
              <FormAuth
                rules={[{ required }]}
                label={intl.formatMessage({ id: 'home.month_money' })}
                name="salary"
                span={span || 12}
              >
                <InputNumber
                  controls={false}
                  style={{ width: '100%' }}
                  prefix="$"
                  maxLength={10}
                  placeholder={`${intl.formatMessage({ id: 'home.month_money' })}`}
                />
              </FormAuth>
            </>
          ),
        };
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [occupationType, employerSize, intl, occupationVal]);

  const { content = '' } = renderItem || {};

  return (
    <>
      {!isCenter ? (
        <div className="info_right_form_title">
          {cSteps == 1 ? (
            intl.formatMessage({ id: 'center.choose_work_type' })
          ) : (
            <>
              {intl.formatMessage(
                { id: 'center.write' },
                { label: intl.formatMessage({ id: 'home.work_info' }).toLowerCase() },
              )}
              （{name}）
            </>
          )}
        </div>
      ) : (
        <div className="info_right_form_sTitle">
          {topTitle || intl.formatMessage({ id: 'home.work_info' })}
        </div>
      )}
      {/* 工作信息 */}
      {cSteps === 1 ? (
        <div>
          <Form.Item
            noStyle
            shouldUpdate={(prevValues, curValues) => prevValues.occupation !== curValues.occupation}
          >
            {({ getFieldValue }) => {
              const fieldType = getFieldValue('occupation');
              return (
                <Row gutter={gutter}>
                  {occupation?.map((item) => {
                    const { value, name } = item;
                    return (
                      <Col
                        onClick={() => {
                          form.setFieldValue('occupation', value);
                        }}
                        className={`box_item ${fieldType == value ? 'box_item_active' : ''}`}
                        span={span || 12}
                        key={name}
                      >
                        <Form.Item>
                          <Input
                            style={{ cursor: 'pointer', border: '1px solid #D1D1D1' }}
                            readOnly
                            value={name}
                          />
                        </Form.Item>
                      </Col>
                    );
                  })}
                </Row>
              );
            }}
          </Form.Item>
        </div>
      ) : (
        <>
          {isCenter ? (
            <FormAuth
              rules={[{ required }]}
              label={intl.formatMessage({ id: 'home.work_type' })}
              name="occupation"
              style={{ marginRight: 15 }}
            >
              <Select
                placeholder={intl.formatMessage({ id: 'home.work_type' })}
                options={getOptions(occupation)}
              />
            </FormAuth>
          ) : null}
          <Row gutter={gutter}>{content}</Row>
        </>
      )}
    </>
  );
};

export default StepTwo;
